﻿<form id="editform" action="/@(app.OrganizationUniqueName)/api/localization" method="post" data-jsonajax="true">
    <div class="form-group">
        <select id="languages" name="language" class="form-control"></select>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-primary btn-xs" id="addLabelBtn">
            <span class="glyphicon glyphicon-plus-sign"></span> @app.T["item_add"]
        </button>
        <button type="button" class="btn btn-default btn-xs" id="clearLabelsBtn">
            <span class="glyphicon glyphicon-trash"></span> @app.T["clear"]
        </button>
    </div>
    <div id="labels" class="container"></div>
    <div class="form-group col-sm-12 center-block hide" id="form-buttons">
        <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-saved"></span> @app.T["save"]</button>
        <button type="reset" class="btn btn-default"><span class="glyphicon glyphicon-refresh"></span> @app.T["reset"]</button>
    </div>
</form>
@section Header {
    <link href="/content/js/bootstrap-datepicker-1.5.0/css/bootstrap-datepicker3.min.css?v=@app.PlatformSettings.VersionNumber" rel="stylesheet">
}
@section Scripts {
    <script src="/content/js/jquery.form.js?v=@app.PlatformSettings.VersionNumber"></script>
    <script src="/content/js/jquery-validate/jquery.validate.min.js?v=@app.PlatformSettings.VersionNumber"></script>
    <script src="/content/js/jquery-validate/localization/messages_zh.min.js?v=@app.PlatformSettings.VersionNumber"></script>
    <script>
    $(function () {
        //表单验证
        var $form = $("#editform");
        Xms.Web.Form($form, function (response) {
            if (response.IsSuccess) {
                bindLabels();
                return;
            }
            Xms.Web.Alert(response.ErrorMessage);
        });
        bindLanguages();
        $('#addLabelBtn').on('click', null, addLabel);
        $('#clearLabelsBtn').on('click', null, clearLabels);
    });
    function bindLanguages() {
        Xms.Ajax.GetJson('/api/localization/languages', null, function (response) {
            if (response.IsSuccess) {
                var data = JSON.parse(response.Content);
                var $lang = $('#languages');
                $(data).each(function (i, n) {
                    $lang.append($('<option value="' + n.uniqueid + '">' + n.name + '</option>'));
                });
                $lang.on('change', null, function (e) {
                    bindLabels();
                }).trigger('change');
            }
        });
    }
    function bindLabels() {
        var $labelContainer = $('#labels');
        $labelContainer.empty();
        Xms.Ajax.GetJson('/api/localization/Labels?language=' + Xms.Web.SelectedValue($('#languages')), null, function (response) {
            if (response.IsSuccess) {
                var data = JSON.parse(response.Content);
                $(data).each(function (i, n) {
                    var $row = $('<div class="row"></div>');
                    $row.append($('<div class="form-group col-sm-3"><label class="control-label" id="labelname' + i + '" for="labeltext' + i + ' ">' + n.name + '</label></div>'));
                    $row.append($('<div class="form-group col-sm-8 hidden"><input class="form-control"  name="Labels[' + i + '].name" value="' + n.name + '" /></div>'));
                    $row.append($('<div class="form-group col-sm-8 hidden"><input class="form-control"  name="Labels[' + i + '].Language" value="' + Xms.Web.SelectedValue($('#languages')) + '" /></div>'));
                    $row.append($('<div class="form-group col-sm-9"><input class="form-control" id="labeltext' + i + '" name="Labels[' + i + '].text" type="text" value="' + n.text + '" /></div>'));
                    $labelContainer.append($row);
                });
            }
        });
    }
    function addLabel() {
        var $labelContainer = $('#labels');
        var i = $labelContainer.find('.row').length;
        var $row = $('<div class="row"></div>');
        $row.append($('<div class="form-group col-sm-3"><label class="control-label" for="labeltext' + i + '"><input class="form-control" id="labelname' + i + '" name="Labels[' + i + '].name" type="text" /></label></div>'));
        $row.append($('<div class="form-group col-sm-8"><input class="form-control" id="labeltext' + i + '" name="Labels[' + i + '].text" type="text" /></div>'));
        $row.append($('<div class="form-group col-sm-8 hidden"><input class="form-control"  name="Labels[' + i + '].Language" value="' + Xms.Web.SelectedValue($('#languages')) + '" /></div>'));
        $row.append($('<div class="form-group col-sm-9"><button type="button" class="btn btn-default btn-xs" onclick="removeLabel(this)"><span class="glyphicon glyphicon-trash"></span></button></div>'));
        $labelContainer.prepend($row);
    }
    function clearLabels() {
        $('#labels').find('input[type=text]').val('');
    }
    function removeLabel(e) {
        $(e).parents('.row').remove();
    }
    </script>
}